<template>
  <div>
    <slot name="leftTopSlot"></slot>
    <slot name="rightTopSlot"></slot>
    <!-- 数据表格 -->
    <el-table
      :data="rows"
      :row-key="rowKey"
      stripe
      :border="border"
      :height="myHeight"
      size="mini"
      ref="table"
      v-loading="showLoading"
      @select="$emit('select',arguments[0],arguments[1])"
      @select-all="$emit('select-all',arguments[0],arguments[1])"
      :cell-style="setCellStyle"
      @row-dblclick="handleRowDblClick"
      @row-click="$emit('row-click',arguments[0],arguments[1])"
      @sort-change="handleSortChange"
      @cell-mouse-enter="$emit('cell-mouse-enter',arguments[0],arguments[1],arguments[2],arguments[3])"
      @cell-mouse-leave="$emit('cell-mouse-leave',arguments[0],arguments[1],arguments[2],arguments[3])"
      @filter-change="handleFilterChange"  
      :show-summary="showSummary"
      :summary-method="getSummaries"
      highlight-current-row
      sum-text="合"
      v-on="otherListen"
      >

      <!-- 展开详细 -->
      <el-table-column
        type="expand"
        fixed="left"
        label="..."
        v-if="showExpand">
        <template slot-scope="scope">
          <slot :row="scope.row" name="expandSlot"></slot>
        </template>
      </el-table-column>

      <!-- index列 -->
      <el-table-column
        v-if="showIndex"
        fixed="left"
        width="50">
        <template slot-scope="scope">#{{(scope.$index)+1}}</template>
        <!-- 该列是固定列,不能设置slot,否则会报错,-->
        <!-- 目前定死了只能显示按钮,后期可以考虑改为使用动态组件-->
        <template
          slot="header"
          slot-scope="scope">
          <el-button
            v-if="showHeaderIndexButton"
            size='mini'
            type='primary'
            title='新增'
            circle
            plain
            style="padding:3.5px"
            @click="$emit('index-header-click',arguments[0])"
            icon="el-icon-plus" ></el-button>
          <span v-else>#</span>
        </template>

      </el-table-column>

      <!-- 多选 -->
      <el-table-column
        v-if="multiSelect"
        type="selection"
        width="55"
        ></el-table-column>

      <!-- 数据列 -->
      <template v-for="(col,index) in columns">

        <el-table-column
          v-if="col.show==true || col.show==undefined"
          :key="index"
          :property="index"
          :label="col.text"
          :width="col.width===undefined ? 80 : (col.width===''?'':col.width)"
          :sortable="col.sortable"
          show-overflow-tooltip
          :summation="col.summation"
          :column-key="index"          
          v-bind="col.otherProps"
          >
          <!-- 
          :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"  
          :filter-multiple="false"
          :filter-method="filterTag"
          filter-placement="bottom-end" 
        -->
          <template slot-scope="scope">
            <!-- 如果当前列为按钮显示列 且鼠标移上当前行,显示按钮组 -->
            <template v-if="col.showButton">
              <div v-show="scope.row.__showButton">
                <slot name="rowButtonSlot" :row="scope.row" :index="scope.$index"></slot>
              </div>
            </template>
            <!-- 显示正常的内容 -->
            <template v-if="!(scope.row.__showButton && col.showButton)">
              <!-- html -->
              <span v-if="col.type=='html'" v-html="scope.row[index]"></span>
              <!-- 自定义组件 -->
              <component
                v-else-if="col.type=='component'"
                :is="col.options.type"
                :row="scope.row"
                :index="scope.$index"
                :fld="col.options"
                :col-key="index"

                :value="scope.row[index]"
                @input="scope.row[index]=arguments[0]"
                
                v-bind="col.options">{{scope.row[index]}}</component>
              <!-- 列表弹框 -->

              <!-- 文本 -->
              <span v-else>{{getObjectValue(scope.row,col,index)}}</span>
            </template>
          </template>
        </el-table-column>

      </template>

    </el-table>

    <slot name="leftBottomSlot"></slot>
    <slot name="rightBottomSlot"></slot>
  </div>
</template>
<script type="text/javascript">
  define(['vue','Common'],function(vue,Common){
    //列表组件
    return vue.component('comp-table',{
      template: template,
      //editColumnWidth,showIndex
      // props:['cols','data','action','height','rowKey'],
      props : {
        cols :{required:false},
        data :{required:false},
        action :{required:false,},
        height :{required:false,default:500},
        rowKey:{required:false,default:'id'},
        // showSummary:{required:false,default:false},
        showLoading:{required:false,default:false},
      },
      data : function() {
        return {
          
          // 'searchItem':[],
          'columns':this.cols,
          // 'params':{},
          'multiSelect':false,
          //
          'rows':this.data||[],
          //合计行
          'rowHeji' : {fromOut:false,data:[]},
          //记录的key字段
          // 'rowKey':'id',
          //是否显示载入
          'isLoading':false,
          //表格高度
          'myHeight':this.height || 500,
          //搜索关键字
          // 'key':'',
          //高级搜索关键字
          // 'advParams':{},
          //关键字可匹配字段
          // 'colsForKey':[],
          //关键字输入后选中的匹配字段
          // 'colForKey':'',
          //选中记录
          //'multipleSelection':[],
          //是否显示操作列
          'showEditColumn':false,
          //是否显示展开详细列
          'showExpand':false,
          //是否显示合计行
          //'showSummary':false,
          //是否显示操作栏的文字,
          'showHeaderText':true,
          //是否显示序号列
          'showIndex':false,
          //是否有边线:
          'border':true,
          //是否在序号列表头显示新增按钮
          'showHeaderIndexButton':false,
          otherListen : {
            //'filter-change':this.handleFilterChange,            
          }
        }
      },
      computed : {
        showSummary : function() {
          // dump(this.rowHeji);
          if(this.rowHeji.fromOut && this.rowHeji.data.length>0) return true;
          var found =false;
          for(var k in this.columns) {
            if(this.columns[k].summation) {
              found=true;
              break;
            } 
          }
          //循环数据集，获得合计数据
          if(found) {
            return true;
            // var colPad = 0;
            // if(this.multiSelect) colPad++;
            // if(this.showExpand) colPad++;

            // var rHeji = ['合计'];
            // for(var i=0;this.rows[i];i++) {
            //   var index = 0;
            //   for(var k in this.columns) {
            //     var col = this.columns[k];
            //     dump(col);
            //     if(col.summation) {
            //       dump(this.rows[i][k]);
            //       var _index = colPad+index;
            //       rHeji[_index] = (rHeji[_index]?rHeji[_index]:0)+parseFloat(this.rows[i][k]);
            //     }
            //     index++;
            //   }
            // }
            // dump(rHeji);
            // this.rowHeji = rHeji;
            // return true;
            // dump(rHeji);
            // this.rowHeji[3] = 'test';
          }
          
          return false;
        }
      },
      methods: {
        //清除筛选
        clearFilter(key) {
          if(!key) {
            this.$refs.table.clearFilter();
            return;
          }
          if(Common.isset(this.columns,key)) {

            // dump(this.columns);
            // var opt = this.columns[key].otherProps.filters;
            if(this.columns[key].otherProps && this.columns[key].otherProps.filters) {              
              this.$refs.table.clearFilter(key);
            }
          }
        },
        //筛选条件改变后的动作，一般是从后台重新拿数据
        handleFilterChange :function(filters){
          this.$emit('filter-change',filters);
        },
        //根据col的定义,返回应该显示的字段值
        //row,当前记录行
        //col,字段定义,其中包含displayKey(其值如 Client.name,表示显示Client对象中的name属性)
        //index,字段名
        getObjectValue : function(row,col,index) {
          if(!col.displayKey) return row[index];
          // var arr = col.displayKey.split('.');
          // if(!row[arr[0]]) return row[index];
          // dump(col);dump(row[arr[0]][arr[1]]);
          return row[col.displayKey];
        },
        handleSortChange : function({column, prop, order}) {
          // dump(prop);return;
          this.$emit('sort-change',column, prop, order);
        },
        //改变行背景色
        setCellStyle({row, column, rowIndex, columnIndex}) {
          if(row.__bgColor) {
            return `backgroundColor:${row.__bgColor}`;
          }
          return '';
        },
        // //设置表格宽度
        setHeight : function(h) {
          this.myHeight=h;
        },

        //高级搜索点击
        openAdvanceSearch : function() {
          //显示高级搜索弹框
          this.$refs.advSearchDialog.show();
        },
        //高级搜索弹框点击确认后搜索
        handleAdvSearchOk : function(params) {
          this.advParams = params;
          this.key = '';
          this.currentPage=1;
          this._getRows();
        },
        //右上角菜单点击后触发
        handleCommand : function(itemName) {
          var key = `${itemName}:click`;
          if(!this.$root.callbacks[key]) return;
          this.$root.callbacks[key].apply(this,arguments);
        },

        //自定义合计行方法
        //后台有两种方式定义合计：直接传入合计行数据，
        //或者只指定某些列需要合计
        //分别考虑两种方式。
        getSummaries : function({columns, data}) {
          //如果来自外部，根据后台传入的合计行显示合计
          //如果不是来自外部，根据列定义显示合计行。
          var hejiLink = [];
          if(this.rowHeji.fromOut) {
            // dump('fromout');
            // dump(this.rowHeji.data);return [];
            var heji = this.rowHeji.data;            
            for(var k in this.columns) {
              var col = this.columns[k];
              if(heji[k]) {
                  hejiLink[k] = heji[k];
              }
            }
          } else {
            // dump('from in');
            //根据列定义中的summation生成heji
            for(var i=0;this.rows[i];i++) {
              for(var k in this.columns) {
                var col = this.columns[k];
                if(col.summation) {
                  if(!hejiLink[k]) hejiLink[k] = 0;
                  hejiLink[k] += (Number(this.rows[i][k])||0);
                }
              }
            }
            //处理精度问题
            // debugger;
            for(var k in hejiLink) {
              hejiLink[k] = Math.round(parseFloat(hejiLink[k])*10000)/10000;
            }
          }

          //hejiLink 处理成自然数组
          var colPad = 0;
          if(this.multiSelect) colPad++;
          if(this.showExpand) colPad++;
          
          var temp = [];
          var index=0;
          for (var key in this.columns) {
            if(hejiLink[key]) {
              temp[index+colPad] = hejiLink[key];
            }
            index++;
          }
          temp[0]='合计';

          return temp;
        },
        //设置合计行内容，暴漏给外部调用
        setSummaries : function(rowHeji) {    
          // dump('set fired');      
          this.rowHeji = {
            fromOut:true,
            data:rowHeji,
          };
        },

        //用户手动点击选择某条记录后触发
        // handleUserSelect : function(selection, row) {
        //   this.multipleSelection = selection;
        // },

        // //用户手动点击选择全部记录后触发
        // handleUserSelectAll : function(selection) {
        //   this.multipleSelection = selection;
        // },

        handleRowDblClick :function(row,e) {
          this.$emit('row-dblclick',row,e);
        },
      },
      mounted: function() {
        //格式化columns的格式
        for(var key in this.columns) {
          item = this.columns[key];
          if(typeof(item)=='string') {
            this.columns[key] = {'text':item,'width':90};
          }
        }
        // col.type=="component"
        // col.options.type

        //异步载入需要的子组件,
        var temp = [];
        var mapArr = {};
        for(var k in this.columns) {
          var c = this.columns[k];
          if(c.type!="component") continue;
          var compName = c.options.type;
          temp.push(`_vue!pathComponent/${compName}`);
          mapArr[compName] = mapArr[compName]||[];
          mapArr[compName].push({colKey:k});
        }

        var that  = this;
        require(temp,function(){      
          // console.log('import over');    
          for(var a of arguments) {
            for(var aa of mapArr[a.options.name]) {
              var key = aa.colKey;
              that.columns[key].content = a;
            }
          }
          //如果在el-table使用自定义组件,会渲染失败,可能是el-table的bug,所以这里要重新渲染下
          that.$refs.table.doLayout();
        });
        
        //暴露事件,异步载入后处理，比如设置表格的高度等
        // dump(111)
        this.$emit('on-mount',this);
        // this.setHeight(100)
      }
    });
  });
</script>